<script setup>
import {ref} from 'vue'
const steps = ref([
    {name:'3分钟',num:'100'},
    {name:'5分钟',num:'120'},
    {name:'30分钟',num:'150'},
    {name:'120分钟',num:'170'},
    {name:'180分钟',num:'200'},
])
</script>

<template>
   <div class="welfare">
      <div class="welfare-hd">
         <h3>登录后现金红包天天领</h3>
         <router-link to="/login">
               <button>登录查看</button>
         </router-link>
      </div>
      <div class="welfare-body">
         <div class="welfare-body-item1">
               <h4>做任务 赚金币</h4>
               <p class="welfare-text1">看视频赚2000金币</p>
               <p class="welfare-text2">每次得200金币，可重复</p>
               <button class="btn">去观看</button>
         </div>
         <div class="welfare-body-item2">
               <p class="welfare-text1">每日阅读任务</p>
               <p class="welfare-text2">持续阅读可得海量金币，看越多赚越多</p>
               <button class="btn2">去看书</button>
               <van-steps :active="active" active-color="#E76C3B">
                  <van-step v-for="(v,i) in steps" :key="i">
                     <div class="welfare-icon">
                           <img src="@/assets/images/gold.png" alt="">
                           <span>{{v.num}}</span>
                     </div>
                     <p>{{v.name}}</p>
                  </van-step>
                  
               </van-steps>
         </div>
         <div class="welfare-body-item3">
               <div class="welfare-item3-list">
                  <p class="welfare-text1">投出金选票</p>
                  <img src="@/assets/images/gold.png" alt="">
                  <span>100金币</span>
               </div>
               <p class="welfare-text2">持续助力选出多样好书</p>
               <button class="btn2">去投票</button>
         </div>
         <div class="welfare-body-item3">
               <div class="welfare-item3-list">
                  <p class="welfare-text1">邀请好友领15元</p>
                  <img src="@/assets/images/gold.png" alt="">
                  <span>15元</span>
               </div>
               <p class="welfare-text2">邀请越多赚越多，最多可赚800元</p>
               <button class="btn2">去邀请</button>
         </div>
         <div class="welfare-body-item3">
               <div class="welfare-item3-list">
                  <p class="welfare-text1">每日听书挑战</p>
                  <img src="@/assets/images/gold.png" alt="">
                  <span>120金币</span>
               </div>
               <p class="welfare-text2">听书120分钟得120金币</p>
               <button class="btn2">去听书</button>
         </div>
         <div class="welfare-body-item3">
               <div class="welfare-item3-list">
                  <p class="welfare-text1">打开消息通知</p>
                  <img src="@/assets/images/gold.png" alt="">
                  <span>200金币</span>
               </div>
               <p class="welfare-text2">打开消息通知领200金币</p>
               <button class="btn2">去完成</button>
         </div>
      </div>
   </div>
</template>

<style scoped>
</style>